<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户 </el-button>
        </el-col>
      </el-row>

      <!-- 下面是用户列表渲染 分页过的数据  -->
      <el-table :data="userlist" style="width: 100%">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column
          label="用户名"
          prop="UserName"
          width="100"
        ></el-table-column>
        <el-table-column
          label="手机"
          prop="Mobile"
          width="180"
        ></el-table-column>
        <el-table-column
          label="邮箱"
          prop="Email"
          width="180"
        ></el-table-column>
        <el-table-column
          label="状态"
          prop="MgState"
          width="100"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="dfdf">
            <el-switch
                v-model='dfdf.row.MgState'
                active-color="#13ce66"
                @change="userstatechange(dfdf.row)"
            > </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  props: [],
  components: {},
  //    const {query,pagenum,pagesize} = req.query
  data() {
    return {
      userlist: [],
      queryinfo: { query: "", pagenum: 0, pagesize: 3 },
    };
  },
  //方法 函数写这里
  methods: {
    async getuserlist() {
      const res = await this.$http.get("/api/users", {
        params: this.queryinfo,
      });
      console.log("userlist silce", res);
      this.userlist = res.data.data;
      console.log("thisuserlist", this.userlist);
    },
  async  userstatechange(userinfo){
        console.log('userinfo',userinfo)
        const res = await this.$http('/api/userupdate',{params:userinfo})
        //  res.json ({
        //                 "code":"200",
        //                 "newState":user.MgState
        //             })
        console.log('res',res)
        if(res.data.code != 200) {
            this.$message('请求没成功')
            return 
        } 
        console.log('newstate',res.data.newState)
        if(res.data.newState == 'true') {
             this.$message.success('现在是正常状态')
             return 
        }else {
                this.$message ('现在是封禁状态')
        }

       


    }
  },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {},
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {
    this.getuserlist();
  },
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  mounted() {},
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {},
};
</script>


<style lang="scss"  scoped>
.el-card {
  margin-top: 20px;
  box-shadow: 0 2px 2px #121a2a;
}

.el-breadcrumb {
  font-size: 12px;
}

.eltable {
  width: 100% !important;
}
</style>